<template>
	<view class="store-list-container">
		<view class="list" v-for='(item,index) in areaList' :key="index" @click.stop="selectStore(item)">
			<view class="item" :class="[item.selected?'active':'']">
				<!-- 图片 -->
				<view class="image">
					<image :src="item.image" mode=""/>
				</view>
				<!-- 文字 -->
				<view class="info">
					<view class="top">
						<span class='store'>{{item.name}}</span>
						<span class='distance'>距离您 1.2km</span>
					</view>
					<view class="bottom">
						<span class='area-info'>{{item.address}}</span>
						<span class='map-load'>
							<image src="/static/images/pages/area/MapPin@2x.webp" mode=""></image>
							查看路线
						</span>
					</view>
				</view>
				<!-- 选中的样式 -->
				<view class="checked" v-if='item.selected'>
					<image src="/static//images/pages/area/选择的门店@2x.webp" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'StoreList',
		props:{
			areaList:{
				type:Array,
				default:()=>{
					return []
				}
			}
		},
    methods:{
      selectStore(item){
        this.$emit('selectStore',item)
      }
    }
	}
</script>

<style lang="scss" scoped>
	.store-list-container{
		padding-top: 20rpx;
	}
	.list {
		width: 700rpx;
		margin: 0 auto;
		.item {
			position: relative;
			width: 100%;
			height: 160rpx;
			background-color: $white-notion;
			border-radius: 12rpx;
			display: grid;
			grid-template-columns: 140rpx auto;

			.checked {
				position: absolute;
				right: -2rpx;
				top: -24rpx;

				image {
					width: 170rpx;
					height: 52rpx;
				}
			}

			&.active {
				box-shadow: 0 1rpx 2rpx 0px $shadow-color;
			}

			.image {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
				}
			}

			.info {
				height: 156rpx;
				display: flex;
				flex-direction: column;

				.top {
					position: relative;
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.store {
						font-size: 28rpx;
						font-weight: 400;
						width: 380rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}

					.distance {
						font-size: 24rpx;
						font-weight: 400;
						color: $number-rich;
						margin-right: 18rpx;
					}

					&::after {
						position: absolute;
						content: "";
						display: block;
						width: 96%;
						height: 0%;
						bottom: 0;
						left: 0.5%;
						border-bottom: 1rpx dotted $shadow-color;
					}

				}

				.bottom {
					position: relative;
					width: 100%;
					height: 76rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.area-info {
						font-size: 24rpx;
						font-weight: 400;
						width: 400rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 2; //行数
						line-clamp: 2;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}

					.map-load {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}

						font-size: 24rpx;
						font-weight: 300;
						color: $main-color;
						margin-right: 24rpx;
					}
				}



			}

			&:not(:last-child) {
				margin-bottom: 40rpx;
			}

			&:first-child {
				margin-top: 24rpx;
			}
		}
	}
</style>
